<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 这个地方必须得引入，否则会出现页面可缩放的问题-->
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>Photo Browser</title>
    <!-- weui的相关css样式，需要引入-->
    <link rel="stylesheet" href="../css/weui.min.css">
    <link rel="stylesheet" href="../css/jquery-weui.min.css">
</head>
<body>


<script src="../js/jquery.min.js"></script>
<script src="../js/jquery-weui.min.js"></script>
<script src="../js/swiper.min.js"></script>
<script>

    /*
    * open(index)	打开图片浏览器，可以传入一个可选的 index 参数来指定打开后默认显示的图片(从0开始)
      close()	关闭图片浏览器
      slideTo(index, duration)	滚动到指定图片
      slidePrev()	滚动到上一张图片
      slideNext()	滚动到下一张图片
      activeIndex	当前显示的图片
      currentScale	当前缩放比例
    * */
    var photoBrowser = $.photoBrowser({
        items: [{
            image: "../images/swiper/swiper-1.jpg",
            caption: "描述文案1"
        }, {
            image: "../images/swiper/swiper-2.jpg",
            caption: "描述文案2"
        }, {
            image: "../images/swiper/swiper-3.jpg",
            caption: "描述文案3"
        }],
        onSlideChange:function(){
            $.alert("这个是左右切换的回调函数");
            console.log("这个事切换的时候打印出来的");
        },
        onOpen:function(){
            $.alert("这个是打开的时候的回调函数，可以设置从第几张照片开始的，不信你看代码");
        },
        onClose:function(){
            $.alert("这个是关闭的时候的回调函数");
        },
        initIndex:2/*这个是设置从第几张开始轮播对应的图片*/

    });
    photoBrowser.open();



</script>
</body>
</html>